<template>
  <view class="order-item-site">
    <view class="car-info-item">
      <view class="car-info-tag">
        <template v-if="type == 'site'">
          {{ record.sendServiceFlag ? `上门送车` : '到店取车' }}
        </template>
        <template v-else>
          {{ record.returnServiceFlag ? `上门取车` : '到店还车' }}
        </template>
      </view>
      <view class="car-info-content">
        <view class="site-name">
          {{ record[type == 'site' ? 'siteName' : 'returnSiteName'] }}
        </view>
        <view class="staff-name-show">
          <view class="staff" v-if="canEditStaff">
            {{ type == 'site' ? '交车人：' : '还车人：' }}
            <view class="staff-name" @click.stop="editOrderStaffFn">
              {{ record[type == 'site' ? 'giveStaffName' : 'returnStaffName'] || '未指派' }}
              <template
                v-if="
                  record[type == 'site' ? 'giveStaffName' : 'returnStaffName'] &&
                  record[type == 'site' ? 'giveStaffStatusName' : 'returnStaffStatusName']
                "
              >
                <span :class="getStatusClassName(record[type == 'site' ? 'giveStaffStatus' : 'returnStaffStatus'])">
                  | {{ record[type == 'site' ? 'giveStaffStatusName' : 'returnStaffStatusName'] }}
                </span>
              </template>
            </view>
          </view>
          <!-- 不可编辑 -->
          <view class="staff staff-disable" v-else>
            {{ type == 'site' ? '交车人：' : '还车人：' }}
            <view class="staff-name">
              {{ record[type == 'site' ? 'giveStaffName' : 'returnStaffName'] || '未指派' }}
              <template
                v-if="
                  record[type == 'site' ? 'giveStaffName' : 'returnStaffName'] &&
                  record[type == 'site' ? 'giveStaffStatusName' : 'returnStaffStatusName']
                "
              >
                <span :class="getStatusClassName(record[type == 'site' ? 'giveStaffStatus' : 'returnStaffStatus'])">
                  | {{ record[type == 'site' ? 'giveStaffStatusName' : 'returnStaffStatusName'] }}
                </span>
              </template>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="car-info-address" v-if="record[type == 'site' ? 'address' : 'returnAddress']">
      {{ record[type == 'site' ? 'address' : 'returnAddress'] }}
    </view>
  </view>
</template>

<script setup>
  const emit = defineEmits(['edit'])
  const props = defineProps({
    record: {
      type: Object,
      default: () => {},
    },
    type: {
      type: String,
      default: 'site',
    },
    // 是否可以编辑交还车人，短租需要判断是否是渠道手动维护
    canEditStaff: {
      type: Boolean,
      default: true,
    },
  })

  const getStatusClassName = (status) => {
    switch (status) {
      case 2:
        return 'success'
      case 1:
        return 'warning'
      case 3:
        return 'danger'
    }
  }

  // 编辑交还车人
  const editOrderStaffFn = () => {
    console.log('编辑交还车人')
    emit('edit')
  }
</script>

<style lang="less" scoped>
  .car-info-item {
    display: flex;
    align-items: flex-start;
    .car-info-tag {
      height: 38rpx;
      line-height: 40rpx;
      box-sizing: content-box;
      font-size: 22rpx;
      border-radius: 20rpx;
      border: 1rpx solid #9ea5bb;
      padding: 0 12rpx;
      color: #9ea5bb;
      margin-right: 16rpx;
      flex-shrink: 0;
    }
    .car-info-content {
      flex: 1;
      font-size: 24rpx;
      color: #191c27;
      .site-name {
        font-size: 24rpx;
        height: 24rpx;
        line-height: 40rpx;
        margin-right: 64rpx;
        display: inline;
      }
      .staff-name-show {
        display: inline;
        white-space: nowrap;
        .staff {
          display: inline;
          .staff-name {
            font-size: 24rpx;
            display: inline;
            color: #3072f6;
            border-bottom: 1rpx solid #3072f6;
          }
        }
        .staff-disable {
          color: #9ea5bb;
          .staff-name {
            font-size: 24rpx;
            color: #9ea5bb;
            border-bottom: none;
          }
        }
      }
    }
  }
  .car-info-address {
    background: #eff0f2;
    line-height: 44rpx;
    font-size: 24rpx;
    color: #191c27;
    padding: 0 16rpx;
    margin-top: 20rpx;
  }
</style>
